
<template>
	<view class="tm-menubars fulled ">
		<view v-if="!transparent" :style="{height:tabHeight}"></view>
		<view v-if="!transparent" :style="{ height: '45px' }"></view>
		<view class="body  " :style="widths" 
		:class="[black_tmeme ? 'bk grey-darken-4 ' : '',
		ColorThemeName.theme?('shadow-'+color_tmeme+`-${shadow} `+color_tmeme):('shadow-'+shadow),
		transparent?(nowScrollTop<scrollTobg?'transparent flat '+`text-${fontColor}`:''):'',
		flat?flat:'']">
			<view :style="{height:tabHeight}"></view>
			<view class="body_wk flex-between">
				<view class="left flex-start">
					<block v-if="showback">
						<view v-if="pageUrl&&isHome==false" class="home-btn mr-20 text flex-center flex-shrink" :class="black_tmeme?'grey-darken-3 bk':'primary'">
							<navigator :url="pageUrl" open-type="reLaunch" class="flex-center">
								<tm-icons dense :color="color_tmeme" name="icon-home" size="28">
							</tm-icons></navigator>
						</view>
						<navigator v-if="!pageUrl" open-type="navigateBack" class="flex-center px-24 flex-shrink">
							<tm-icons  :color="transparent?(!isTransparent?(theme=='black'?'white':'black'):iconColor):iconColor" name="icon-angle-left" size="28">
						</tm-icons></navigator>
					</block>

					<slot name="left" :data="{style:widths,isTransparent:isTransparent,title:title}">
					</slot>
				</view>
				<view class="center flex-center text-size-g ">
					<slot name="default" :data="{style:widths,isTransparent:isTransparent,title:title}">{{ title }}</slot>
				</view>
				<view class="right flex-end" :style="{ width: widths.btns }"><slot name="right " :data="{style:widths,isTransparent:isTransparent,title:title}"></slot></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	/**
	 * 菜单工具栏
	 * @property {Boolean} black = [true|false] 默认:false,暗黑模式。
	 * @property {String|Array} color = [primary] 默认:primary,主题颜色名称如果为array,则为渐变色格式第一个方向：top,bottom,right,left[top,color1,color2]，如果为string时，可以为rgba,rgb,#fff或者颜色主题名称如：purple-darken-4
	 * @property {String} theme = [black|white] 默认:custom,只有在transparent:true时，black:表示黑色模式，文字变白。white文字变黑。
	 * @property {String} font-color = [] 默认:text-black,顶部文字颜色。只有在开启：transparent时才有用。
	 * @property {String} icon-color = [] 默认:white,左边返回图标的颜色
	 * @property {String} home-url = [] 默认:'/pages/index/index',应用的首页地址。当从其它页面以reLaunch进入非首页时会自动显示首页按钮。
	 * @property {Boolean} flat = [true|false] 默认:false,去除投影，边线
	 * @property {Boolean} transparent = [true|false] 默认:false,开启透明顶部。下拉时会变成自定义的背景色。
	 * @property {Number} scroll-tobg = [true|false] 默认:0,当值大于0即开启透明背景。下拉时达到设定的值，即显示自定义的背景和文字色。
	 * @property {Number | String} width = [] 默认:0,宽度，数字，或者百度比。数字的单位是upx
	 * @property {Boolean} showback = [true|false] 默认:true,是否显示左边的返回和首页按钮。
	 * @property {String} title = [] 默认:标题, 中间标题文字。
	 * @example <tm-menubars  color="white" :showback="false"></tm-menubars>
	 * 
	 */

	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmIcons},
	name:"tm-menubars",
	props: {
		// 是否开启暗黑模式
		black: {
			type: String | Boolean,
			default: null
		},
		// 主题颜色名称如果为array,则为渐变色格式第一个方向：top,bottom,right,left[top,color1,color2]
		// 如果为string时，可以为rgba,rgb,#fff或者颜色主题名称如：purple-darken-4
		color: {
			type: String | Array,
			default: 'primary'
		},
		// custom为自定导航样式 。black标题文字为白。white标题文字为黑。它表示的是所处背景的模式。
		theme:{
			type:String,
			default:'custom' //'black'|'white'|'custom'
		},
		
		// 这个只配合。scrolltoBg使用，当前透明背景时，文字使用什么颜色 。默认黑色。使用主题颜色名称
		fontColor:{
			type:String,
			default:'black'
		},
		iconColor:{
			type:String,
			default:'white' //white
		},
		// 几乎所有组件都有flat选项，去除投影，边线。
		flat:{
			type:String|Boolean,
			default:false
		},
		// 是否开启顶部透明模式。
		transparent:{
			type:String | Boolean,
			default:false,
		},
		// 当值大于0即开启透明背景。下拉时达到设定的值，即显示自定义的背景和文字色。
		scrollTobg:{
			type:Number,
			default:70
		},

		// 宽度，数字，或者百度比。数字的单位是upx
		width: {
			type: Number | String,
			default: ''
		},
		// 是否显示左边的返回和首页按钮。
		showback: {
			type: Boolean,
			default: true
		},
		// 中间标题文字。
		title: {
			type: String,
			default: '标题'
		},
		// 首页页面地址。当前访问子页面时，将会显示首页按钮。
		homeUrl:{
			type: String,
			default: '/pages/index/index'
		},
		shadow:{
			type: String|Number,
			default:3
		},
		// 跟随主题色的改变而改变。
		fllowTheme:{
			type:Boolean|String,
			default:true
		}
	},
	data() {
		return {
			pageUrl: '',
			nowScrollTop:0,
			ColorThemeName:false,
			isHome:false,
			tabHeight:0
		};
	},
	computed: {
		black_tmeme: function() {
			if (this.black !== null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		},
		color_tmeme:function(){
			if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		// 当页面在滚动时返回当前是透明还是不透明背景。
		isTransparent:function(){
			return this.nowScrollTop<this.scrollTobg;
		},
		widths: function() {
			
			let topoffset = 0;
			let sysinfo = uni.getSystemInfoSync();
			let jnwd = 0; //小程序有的胶囊宽度.
			
			// #ifdef MP
			// 胶囊的大小。
			let mw = uni.getMenuButtonBoundingClientRect();
			jnwd = mw.width;
			// #endif
			
			let color = {};
			let background = '#000';
			let fontColor = '#fff';
			
			let isth = this.ColorThemeName.theme;
			if (typeof this.color === 'string') {
				if(!this.black){
					if(this.theme!=='custom'){
						background = this.theme;
						if(this.theme=='white'){
							fontColor="#000"
						}
					}else{
						background =  isth?'':this.color;
					}
				}
				color = {
					background: background,
					color: fontColor
				};
			}
			if (typeof this.color === 'object') {
				if(!this.black){
					if(this.theme!=='custom'){
						background = this.theme;
						if(this.theme=='white'){
							fontColor="#000"
						}
					}else{
						background = isth?'':`linear-gradient(to ${this.color[0]},${this.color[1]},${this.color[2]})`;
					}
				}
				color = {
					backgroundImage: background,
					color: fontColor
				};
			}

			if (isNaN(parseInt(this.width))) {
				return uni.$tm.objToString({
					width: sysinfo.windowWidth+'px',
					left: '0px',
					top: topoffset + 'px',
					btns: jnwd + 'px',
					...color
				});
			}
			if (String(this.width).indexOf('%') > -1 || String(this.width).indexOf('vw') > -1) {
				let num = parseFloat(this.width.replace(/(\%|vw|)/g, ''));
				let blv = this.width.replace(/[\.|a-zA-Z0-9]/g, '');

				return  uni.$tm.objToString({
					width: this.width,
					left: (100 - num) / 2 + blv,
					top: topoffset + 'px',
					btns: jnwd + 'px',
					...color
				});
			}

			let wid = uni.upx2px(parseFloat(this.width));
			let lf = (sysinfo.windowWidth - wid) / 2;
			return uni.$tm.objToString({
				width: uni.upx2px(parseFloat(this.width)) + 'px',
				left: lf + 'px',
				top: topoffset + 'px',
				btns: jnwd + 'px',
				...color
			});
		}
	},
	created() {
		let sysinfo = uni.getSystemInfoSync();
		
		let sysbarheight = 0;
		// #ifdef MP || APP-PLUS || APP-VUE
		sysbarheight = sysinfo.statusBarHeight;
		// #endif
		
		
		this.tabHeight = sysbarheight+'px'
	},
	mounted() {
		this.ColorThemeName = this.$TestColor(this.color);
		uni.$on('onPageScroll',(e)=>{
			this.nowScrollTop = e.scrollTop;
		})
		// 检查页面栈
		let pages = getCurrentPages();
		let nopage = pages[pages.length-1].route;
		if(nopage[0] !='/'){
			nopage = '/' + nopage;
		}
		if(nopage == this.homeUrl){
			this.isHome = true;
		}
		if (pages.length == 1 && typeof pages[0].route !== 'undefined') {
			// #ifdef H5
			this.pageUrl = '/';
			// #endif
			// #ifdef MP
			this.pageUrl = this.homeUrl;
			// #endif
		}
	},
	methods: {}
};
//
</script>

<style lang="scss" scoped>
	.tm-menubars{
		
		.body {
			position: fixed;
			z-index: 450;
			top: 0;
			left: 0;
			
			&.transparent{
				background: none !important;
				transition: all 0.6s;
			}
			.body_wk {
				height: 45px;
				opacity: 0.9;
				
				.left {
					max-width: 74px;
					min-width: 74px;
		
					.home-btn {
						
						border-radius: 50%;
						
						height: 24px;
						width: 24px;
						line-height: 24px;
						margin-left: 24upx;
					}
				}
				.right {
					max-width: 74px;
					min-width: 74px;
				}
				.center{
					width: calc(100% - 148px);
					flex-shrink: 0;
				}
			}
		}
	}

</style>
